var prev2 = document.querySelector(".page3 .prev")
var next2 = document.querySelector(".page3 .next")
var shu = document.querySelector(".shu")
var lis = document.querySelectorAll(".kuang li")
var imgs2 = document.querySelectorAll(".kuang2 img")

//下一张
next2.onclick = function(){
	
	var newv = 0
	clearInterval(timer)
	var timer = setInterval(() => {
		var oldv = parseInt(getComputedStyle(shu).left)
		newv = oldv - 15
		if(newv < -690){
			newv = -690
			clearInterval(timer)
		}
		shu.style.left = newv + 'px'
		
	},10)
}

//上一张
prev2.onclick = function(){
	
	var newv = 0
	clearInterval(timer)
	var timer = setInterval(() => {
		var oldv = parseInt(getComputedStyle(shu).left)
		newv = oldv + 15
		if(newv > 0){ 
			newv = 0
			clearInterval(timer)
		}
		shu.style.left = newv + 'px'
		
	},10)
}

//鼠按钮点击事件
var mouses = document.querySelector(".mouses")

lis[0].classList.add('libj')
mouses.classList.add('shubj')
mouses.onclick = function(){
	cats.classList.remove('maobj')
	mouses.classList.add('shubj')
	shu.style.display = 'block'
	shu.style.left = '0'
	mao.style.display = 'none'
	prev2.style.display = 'block'
	next2.style.display = 'block'
	for(var j=0; j<imgs2.length; j++){
		imgs2[j].style.display = 'none'
		lis[j].classList.remove('libj')
	}
	imgs2[0].style.display = 'block'
	lis[0].classList.add('libj')
}

//猫按钮点击事件
var cats = document.querySelector(".cats")
var mao = document.querySelector(".mao")
cats.onclick = function(){
	mouses.classList.remove('shubj')
	cats.classList.add('maobj')
	shu.style.display = 'none'
	mao.style.display = 'block'
	prev2.style.display = 'none'
	next2.style.display = 'none'
	for(var j=0; j<imgs2.length; j++){
		imgs2[j].style.display = 'none'
	}
	imgs2[17].style.display = 'block'
	lis[17].classList.add('libj')
}


//li的点击事件
imgs2[0].style.display = 'block'
for(let i=0; i<lis.length; i++){
	lis[i].onclick = function(){
		for(var j=0; j<imgs2.length; j++){
			imgs2[j].style.display = 'none'
			lis[j].classList.remove('libj')
		}
		imgs2[i].style.display = 'block'
		lis[i].classList.add('libj')
	}
}














